<template>
  <div style="margin-bottom: 30px;display: flex;justify-content: center;align-items: center">
    <el-input
      @keyup.enter.native="searchClick"
      placeholder="通过客户名进行搜索..."
      prefix-icon="el-icon-search"
      size="small"
      style="width: 300px;margin-right: 10px"
      v-model="customerName">
    </el-input>
    <el-select v-model="value" placeholder="请选择状态" size="small">
      <el-option
        v-for="item in orderStatus"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <div style="margin-left: 12px">
      <el-button size="small" type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
      <el-button size="small" icon="el-icon-refresh-right" @click="reset">重置</el-button>
    </div>

  </div>
</template>

<script>
export default {
  name: 'SearchBar',
  data() {
    return {
      customerName: '',
      value: '',
      orderStatus: [{
        value: '1',
        label: '已录入'
      }, {
        value: '2',
        label: '已提交'
      }, {
        value: '3',
        label: '进行中'
      }, {
        value: '4',
        label: '维修结束'
      }, {
        value: '5',
        label: '归还中'
      }, {
        value: '6',
        label: '完成订单'
      }],
    }
  },
  methods: {
    searchClick() {
      this.$emit('SearchByCustomer')
    },
    reset() {
      this.customerName = ''
      this.value = ''
      this.$emit('SearchByCustomer')
    }
  }
}
</script>

<style scoped>

</style>


